<template>
	<view class="pt-40">
		<view class="box flex">
			<image class="img mr-20" src="/static/user/passphone.png"></image>
			<input placeholder="输入手机号码" maxlength="11" type="number" v-model="phone" />
		</view>
		<view class="box flex flexSbetween">
			<view class="flex" style="flex: 1;">
				<image class="img2 mr-20" src="/static/user/code.png"></image>
				<input placeholder="输入验证码" v-model="authCode" />
			</view>
			<view class="authCode" @click="getCode">{{btnMsg}}</view>
		</view>
		<view class="box flex flexSbetween">
			<view class="flex">
				<image class="img2 mr-20" src="/static/user/pass2.png"></image>
				<input style="width: 400rpx;" placeholder="输入密码(请输入6-20位)" :password="passStatus" v-model="pass" />
			</view>
			<u-icon name="eye-off" color="#444" size="40rpx" @click="checkPass" v-if="!passStatus"></u-icon>
			<u-icon name="eye" color="#444" size="40rpx" @click="checkPass" v-if="passStatus"></u-icon>
		</view>
		<view class="box flex">
				<image class="img2 mr-20" src="/static/user/pass.png"></image>
				<input placeholder="确定密码" password v-model="confirmPass" />
		</view>
		<button @click="confirm">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				time: '',
				btnMsg: '获取验证码',
				authCode:'',
				passStatus:true,
				pass:'',
				confirmPass:''
			}
		},
		onLoad() {

		},
		methods: {
			confirm(){
				if (!(/^1\d{10}$/).test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return;
				}
				if (!this.authCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (!this.pass) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (this.confirmPass != this.pass) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return
				}
				let data={
					mobile:this.phone,
					newpassword:this.pass
				}
				this.api.post('api/user/resetpwd',data).then((res)=>{
					if(res.code == 200){
						uni.redirectTo({
							url:'/pages/login/newPasswordSuccess'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			getCode() {
				if (!(/^1\d{10}$/).test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return;
				}
				let data={
					mobile:this.phone,
					event:'resetpwd'
				}
				this.api.post('api/sms/send',data).then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.time = 60;
						console.log(this.time)
						let t = setInterval(() => {
							if (this.time > 0) {
								this.btnMsg = this.time + "s后获取";
								this.time--;
							} else {
								this.btnMsg = "获取验证码";
								this.time = 60;
								clearInterval(t);
							}
						}, 1000);
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			checkPass() {
				this.passStatus = !this.passStatus
			},
		}
	}
</script>

<style>
	.box {
		border-bottom: 1rpx solid #BDBDBD;
		padding-bottom: 20rpx;
		margin: 40rpx;
	}
	input{
		flex: 1;
	}
	.img {
		width: 27rpx;
		height: 40rpx;
	}

	.img2 {
		width: 39rpx;
		height: 40rpx;
	}

	.authCode {
		color: #FF9595;
		font-size: 28rpx;
	}
	button{
		background: #F87985;
		color: #fff;
		border-radius: 50rpx;
		margin: 80rpx 60rpx 60rpx;
	}
</style>